<template>
	<view
		v-show="visible"
		class="filter-type"
		@click="popupChg(false)"
	>
		<view class="mask"></view>
		<view class="content">
			<scroll-view
				scroll-y
				class="h-full"
			>
				<view class="list">
					<view
						class="list-item"
						v-for="item in list"
					>
						<view class="list-item-name">
							{{item.name}}
						</view>
						<view class="flex flex-wrap">
							<view
								class="list-item-radio flex-row-center"
								v-for="(cItem,cIndex) in item.children"
							>
								{{cItem.name}}{{cIndex+1}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "filter-type",
		props: {
			visible: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				list: [{
						name: "资料类型",
						children: new Array(4).fill({
							name: "类别"
						})
					},
					{
						name: "国别",
						children: new Array(8).fill({
							name: "类别"
						})
					},
					{
						name: "语种",
						children: new Array(8).fill({
							name: "类别"
						})
					}
				]

			};
		},
		methods: {
			popupChg(show) {
				this.$emit('update:visible', show)
			},
		}
	}
</script>

<style
	lang="scss"
	scoped
>
	.filter-type {
		--placeholder: 88rpx;
		position: fixed;
		top: var(--window-top);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;

		.mask {
			position: absolute;
			top: var(--placeholder);
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: calc(100% - var(--placeholder));
			background-color: rgba(0, 0, 0, 0.4);
		}

		.content {
			margin-top: var(--placeholder);
			position: relative;
			z-index: 2;
			background-color: #EBEBEB;
			height: 600rpx;

			.list {
				padding: 24rpx;

				&-item {
					margin-bottom: 24rpx;

					&-radio {
						margin-top: 16rpx;
						margin-right: 10rpx;
						min-width: 168rpx;
						background: #FFFFFF;
						padding: 8rpx;
						box-sizing: border-box;
						border-radius: 30rpx;

						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>